<template>
  <PageWrapper fixedHeight contentBackground>
    <Tabs v-model:activeKey="activeKey" :tabBarGutter="5">
      <template v-for="item in tabList" :key="item.key">
        <TabPane :tab="item.name" forceRender>
          <component :is="item.component" v-bind="{ ...item.data, verifyType: item.key }" :class="`${prefixCls}-content`" />
        </TabPane>
      </template>
    </Tabs>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { ref, shallowRef, defineComponent, computed } from "vue"
  import { PageWrapper } from "/@/components/Page"
  import { Tabs } from "ant-design-vue"
  import { useDesign } from "/@/hooks/web/useDesign"
  import GoodsAttrList from "./GoodsAttrList.vue"
  import { useUserStore } from "/@/store/modules/user"
  const userStore = useUserStore()
  const TabPane = Tabs.TabPane

  // 暂存验证的tab
  const tabList = ref<any>([
    {
      key: "goods_attr",
      name: "属性库",
      component: shallowRef(GoodsAttrList),
    },
  ])

  const { prefixCls } = useDesign("goods-expand")

  const activeKey = ref("goods_attr")
</script>

<style lang="less">
  @prefix-cls: ~"@{namespace}-goods-expand";

  .@{prefix-cls}-content {
  }
</style>
